<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"
    />
    <!-- <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板"> -->
    <!-- <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。"> -->
    <title>管理日志</title>
    <!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> -->
    <!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
    <!-- <meta name="apple-touch-fullscreen" content="yes"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/logs_page.css" />
  </head>

  <body>
    <div id="main" class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <!-- card start -->
          <div class="card">
            <!-- card-header start -->
            <header class="card-header">
              <!-- breadcrumb navigator start -->
              <nav id="nav-title" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li>当前位置：</li>
                  <li class="breadcrumb-item">日志管理</li>
                  <li class="breadcrumb-item active" aria-current="page">
                    管理日志
                  </li>
                </ol>
              </nav>
              <!-- breadcrumb navigator end -->
            </header>
            <!-- card-header end -->
            <!-- card-body start -->
            <div class="card-body">
              <!-- query-area card start -->
              <div id="query-area" class="card mb-3">
                <!-- query-area card-header start -->
                <header
                  class="card-header d-flex justify-content-between align-items-center"
                >
                  <span>查询数据</span>
                  <a
                    class="btn btn-outline-primary"
                    data-bs-toggle="collapse"
                    href="#collapseExample"
                    role="button"
                    aria-expanded="false"
                    aria-controls="collapseExample"
                    @click="toggle"
                  >
                    {{unfoldOrfold}}查询栏
                  </a>
                </header>
                <!-- query-area card-header end -->
                <!-- query-area collapse start -->
                <div class="collapse" id="collapseExample">
                  <!-- query-area card-body start -->
                  <div class="card-body">
                    <span class="d-block m-2">范围查询</span>
                    <div class="row">
                      <div class="col-3">
                        <div class="input-group">
                          <label class="input-group-text" for="dateOfUpdate">
                            日志日期
                          </label>
                          <input
                            type="date"
                            id="dateOfUpdate"
                            class="form-control text-center"
                            aria-label="日期模板输入框"
                            v-model="selectedDate"
                            :min="minDate"
                            :max="maxDate"
                          />
                        </div>
                      </div>
                      <button
                        class="btn btn-primary col-1"
                        type="button"
                        @click=""
                      >
                        查询
                      </button>
                    </div>
                    <span class="d-block m-2">内容查询</span>
                    <div class="row">
                      <div class="col-3">
                        <div class="input-group">
                          <select
                            class="input-group-text"
                            v-model="selectedFieldValue"
                          >
                            <option
                              :value="index"
                              v-for="(item,index) in aryField"
                              :key="item"
                            >
                              <label for="queryContent">{{item}}</label>
                            </option>
                          </select>
                          <input
                            type="text"
                            id="queryContent"
                            class="form-control"
                            placeholder="请输入..."
                            aria-label="选择字段的输入框"
                            v-model="queryValue"
                          />
                        </div>
                      </div>
                      <div class="col-1">
                        <div class="h-100 d-flex align-items-center">
                          <label for="isFuzzy" class="mx-1">模糊查询</label>
                          <input
                            type="checkbox"
                            id="isFuzzy"
                            class="form-check-input"
                            v-model="fuzzy"
                          />
                        </div>
                      </div>
                      <button
                        class="btn btn-primary col-1"
                        type="button"
                        @click=""
                      >
                        查询
                      </button>
                    </div>
                  </div>
                  <!-- query-area card-body end -->
                </div>
                <!-- query-area collapse end -->
              </div>
              <!-- query-area card end -->
              <!-- function-area start -->
              <div id="function-area" class="d-flex justify-content-end mb-1">
                <button
                  id="exportBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click=""
                >
                  导出
                </button>
              </div>
              <!-- function-area end -->
              <!-- table start -->
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col" class="text-center">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        v-model="isAll"
                      />
                    </th>
                    <th scope="col">序号</th>
                    <th scope="col" class="col-1">操作用户</th>
                    <th scope="col" class="col-1">操作对象</th>
                    <th scope="col" class="col-6">描述</th>
                    <th scope="col" class="col-2">操作日期</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in logs" :key="item.logId">
                    <td scope="row" class="text-center">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        v-model="item.checked"
                      />
                    </td>
                    <td>{{index + 1}}</td>
                    <td :title="item.operatingUser">{{item.operatingUser}}</td>
                    <td :title="item.operatedUser">{{item.operatedUser}}</td>
                    <td :title="item.description">{{item.description}}</td>
                    <td :title="item.updateTime">{{item.operatingTime}}</td>
                  </tr>
                </tbody>
              </table>
              <!-- table end -->
              <!-- pagination start -->
              <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                  <li class="page-item disabled">
                    <!-- javascript:void(0) 修改了超链接的默认跳转行为 -->
                    <a class="page-link" href="javascript:void(0)">上一页</a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="javascript:void(0)">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">下一页</a>
                  </li>
                </ul>
              </nav>
              <!-- pagination end -->
            </div>
            <!-- card-body end -->
          </div>
          <!-- card end -->
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/logs_all_page.js"></script>
  </body>
</html>
